<template>
  <div class="clock">
    <div class="year">{{ year }} 年</div>
    <div class="second" :style="{
      '--round-inset': '0vmin',
      '--r': -second * 6 - r[0] * 360
    }">
      <div class="round" :style="{
        '--unit-inset': '3vmin',
      }">
        <div v-for="i of Array.from({ length: 60 }, (_, i) => i)" :style="{
          '--i': i,
          '--all': 60
        }" :key="i">{{ i }}</div>
      </div>
      <div class="unit">秒</div>
    </div>
    <div class="minute" :style="{
      '--round-inset': '7vmin',
      '--r': -minute * 6 - r[1] * 360
    }">
      <div class="round" :style="{
        '--unit-inset': '3vmin',
      }">
        <div v-for="i of Array.from({ length: 60 }, (_, i) => i)" :style="{
          '--i': i,
          '--all': 60
        }" :key="i">{{ i }}</div>
      </div>
      <div class="unit">分</div>
    </div>
    <div class="hour" :style="{
      '--round-inset': '14vmin',
      '--r': -hour * 15 - r[2] * 360
    }">
      <div class="round" :style="{
        '--unit-inset': '3vmin',
      }">
        <div v-for="i of Array.from({ length: 24 }, (_, i) => i)" :style="{
          '--i': i,
          '--all': 24
        }" :key="i">{{ i }}</div>
      </div>
      <div class="unit">时</div>
    </div>
    <div class="week" :style="{
      '--round-inset': '20.8vmin',
    }">
      <div class="round" :style="{
        '--unit-inset': '0vmin',
        '--r': -week * 360 / 7 - r[3] * 360
      }">
        <div v-for="(value, i) of ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']" :style="{
          '--i': i,
          '--all': 7
        }" :key="i">{{ value }}</div>
      </div>
      <div class="unit"></div>
    </div>
    <div class="day" :style="{
      '--round-inset': '28vmin',
      '--r': -day * 360 / mounthLength - r[4] * 360
    }">
      <div class="round" :style="{
        '--unit-inset': '2.8vmin',
      }">
        <div v-for="i of Array.from({ length: mounthLength }, (_, i) => i)" :style="{
          '--i': i,
          '--all': mounthLength
        }" :key="i">{{ i + 1 }}</div>
      </div>
      <div class="unit">日</div>
    </div>
    <div class="month" :style="{
      '--round-inset': '34vmin',
    }">
      <div class="round" :style="{
        '--unit-inset': '2.8vmin',
        '--r': -month * 30 - r[5] * 360

      }">
        <div v-for="i of Array.from({ length: 12 }, (_, i) => i)" :style="{
          '--i': i,
          '--all': 12
        }" :key="i">{{ i + 1 }}</div>
      </div>
      <div class="unit">月</div>
    </div>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue';
const last=[-1,-1,-1,-1,-1,-1]
const r = [0, 0, 0, 0, 0, 0]
const now = ref(new Date());
setInterval(() => {
  now.value = new Date();
}, 1000);
const year = computed(() => {
  return now.value.getFullYear();
})
const month = computed(() => {
  if (now.value.getMonth() === 0 && last[5] !== -1 && last[5]!==0) {
    r[5]++
  }
  last[5]=now.value.getMonth()
  return now.value.getMonth();
})
const mounthLength = computed(() => {
  if ([1, 3, 5, 7, 8, 10, 12].includes(now.value.getMonth())) {
    return 31
  } else if ([4, 6, 9, 11].includes(now.value.getMonth())) {
    return 30
  } else {
    if (now.value.getFullYear() % 4 == 0 && now.value.getFullYear() % 100 != 0 || now.value.getFullYear() % 400 == 0) {
      return 29
    }
    return 28
  }
})
const day = computed(() => {
  if (now.value.getDate() === 1 && last[4] !== -1 && last[4]!==0) {
    r[4]++
  }
  last[4]=now.value.getDate() - 1
  return now.value.getDate() - 1;
})
const hour = computed(() => {
  if (now.value.getHours() === 0 && last[2] !== -1 && last[2]!==0) {
    r[2]++
  }
  last[2]=now.value.getHours()
  return now.value.getHours();
})
const minute = computed(() => {
  if (now.value.getMinutes() === 0 && last[1] !== -1 && last[1]!==0) {
    r[1]++
  }
  last[1]=now.value.getMinutes()
  return now.value.getMinutes();
})
const second = computed(() => {
  if (now.value.getSeconds() == 0 && last[0] !== -1 && last[0]!==0) {
    r[0]++
  }
  last[0]=now.value.getSeconds()
  return now.value.getSeconds();
})
const week = computed(() => {
  if (now.value.getDay() == 0 && last[3] !== -1 && last[3]!==0) {
    r[3]++
  }
  last[3]=now.value.getDay()
  return now.value.getDay();
})
</script>
<style scoped lang="scss">
@import "../theme.scss";

.clock {
  @include useTheme {
    background: getVar("contentBg");
    color: getVar("contentColor");
    mix-blend-mode: getVar("mixMod");
  }
}

.clock>* {
  position: absolute;
  inset: 0;
  font-size: 2vmin;

  &.year {
    transform: translate(-50%, -50%);
    inset: unset;
    top: 50%;
    left: 50%;
  }
}


.unit {
  top: 50%;
  right: calc(var(--round-inset));
  position: absolute;
  transform: translate(0, -50%);
  height: 2vmin;
}

.round {
  transform: translate(0, 45vmin) rotate(calc(var(--r) * 1deg));

  &>* {
    position: absolute;
    height: 2vmin;
    top: 50%;
    transform-origin: calc(-45vmin + var(--round-inset) + var(--unit-inset)) 0;
    left: calc(90vmin - var(--round-inset) - var(--unit-inset));
    transform: rotate(calc(360deg * var(--i) / var(--all))) translate(-100%, -50%);
  }
}
</style>